import React from 'react';
import {Switch} from 'antd';
import {useTheme} from '../context/ThemeContext';
import {BgColorsOutlined, SmileOutlined} from '@ant-design/icons';
import '../styles/themes.css';

interface ThemeToggleProps {
    style?: React.CSSProperties;
}

const ThemeToggle: React.FC<ThemeToggleProps> = ({style}) => {
    const {theme, toggleTheme} = useTheme();

    return (
        <div
            style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                ...style
            }}
        >
            <BgColorsOutlined style={{
                color: theme === 'ink' ? '#1677ff' : '#aaa',
                fontSize: '18px'
            }}/>
            <Switch
                checked={theme === 'cartoon'}
                onChange={toggleTheme}
                checkedChildren={<SmileOutlined/>}
                unCheckedChildren={<BgColorsOutlined/>}
                className={theme === 'cartoon' ? 'theme-switch-cartoon' : 'theme-switch-ink'}
            />
            <SmileOutlined style={{
                color: theme === 'cartoon' ? '#ff6b6b' : '#aaa',
                fontSize: '18px'
            }}/>
        </div>
    );
};

export default ThemeToggle;

// 为Switch组件添加一些额外的样式
const style = document.createElement('style');
style.textContent = `
  .theme-switch-ink .ant-switch-inner {
    background: linear-gradient(to right, #141414, #262626) !important;
  }
  
  .theme-switch-cartoon .ant-switch-inner {
    background: linear-gradient(45deg, #ff6b6b, #feca57) !important;
    box-shadow: 0 0 10px rgba(254, 202, 87, 0.5);
  }
`;
document.head.appendChild(style); 